<script>
import axios from "axios";

export default {
  name: "yunPage",
  data() {
    return {
      src: '',
      imglist: [],
      courseList: [],
      boutiqueCourseList:[]
    }
  },
  methods:{
    getCourseList(type){
      return  axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
        type,
        pageNum: 1,
        pageSize: 5
      }, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
    }
  },
  created() {
    // console.dir(axios)
    // url地址
    axios.get('https://wkt.myhope365.com/weChat/applet/course/banner/list?number=3').then(res => {
      console.log(res)
      this.src = res.data.data[0].imgUrlPc
      this.imglist = res.data.data
    })
    console.log()
    this.getCourseList('free').then(res=>{
      this.courseList = res.data.rows
    })
    this.getCourseList('boutique').then(res=>{
      this.boutiqueCourseList = res.data.rows
    })
    // url地址   请求参数   配置
    // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
    //   type: 'free',
    //   pageNum: 1,
    //   pageSize: 5
    // }, {
    //   headers: {
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // }).then(res => {
    //   console.log(res)
    //   this.courseList = res.data.rows
    // })
    //
    // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
    //   type: 'boutique',
    //   pageNum: 1,
    //   pageSize: 5
    // }, {
    //   headers: {
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // }).then(res => {
    //   console.log(res)
    //   this.boutiqueCourseList = res.data.rows
    // })
  }
}
</script>

<template>
  <div>
    <img :src="src" alt="">
    <img v-for="item in imglist" :key="item.id" :src="item.imgUrlPc" alt="">

    <div class="container">
      <div class="course" v-for="item in courseList" :key="item.courseId">
        <div>
          <img :src="item.coverFileUrl" alt="">
        </div>
        <div>
          {{item.courseTitle}}
        </div>
        <div>
          学习人数{{item.learningNum}}
        </div>
        <div >
          免费
        </div>
      </div>
    </div>




    <div class="container">
      <div class="course" v-for="item in boutiqueCourseList" :key="item.courseId">
        <div>
          <img :src="item.coverFileUrl" alt="">
        </div>
        <div>
          {{item.courseTitle}}
        </div>
        <div>
          学习人数{{item.learningNum}}
        </div>
        <div v-if="item.isFree==='1'">
          免费
        </div>
        <div v-else-if="item.isDiscount==='1'">
          <del>{{item.coursePrice}}</del>{{item.discountPrice}}
        </div>
        <div v-else>{{item.coursePrice}}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.container{
  display: flex;
  justify-content: space-between;
  .course{
    width: 18%;
    img{
      width: 100%;
    }
  }
}
</style>